<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/* 标签选择器
			 * 对所有的标签进行选择：
			 * 优点：快速为同种标签统一样式
			 * 缺点：有时会互相干扰
			 * tips：在最开始的时候，
			 *       用于替换浏览器的缺省样式，
			 *       或者希望定义一个默认样式，
			 *       或者希望统一某个元素的样式。
			 */
			/*p {
				background: #F00;
			}*/
			/* ID选择器
			 * 什么样的元素有id？
			 *   用来构建整体框架的标签，一般来说他们在页面中是唯一的，固定的，不重复出现的。
			 * tips：如果一个元素有id或者应该有id，使用ID选择器；
			 *       不要为了找打一个元素就给这个元素增加id然后使用ID选择器
			 */
			/*#pid {
				background: #0F0;
			}*/
			/* 类选择器
			 * 为了一类样式进行选择
			 * class可以叠加使用
			 * 与标签选择器相比，类选择器影响范围较小，也更灵活
			 * 与ID选择器相比，类选择器和标签选择器都可以影响多个标签。
			 * 类选择器的滥用问题。
			 */
			/*.pCls {
				background: #00F;
			}

			.pCls2 {
				color: #FF0;
			}*/
			/* 伪类选择器： 减少类选择器的使用
			 * :first-child
			 * :last-child
			 */
			/*.firstline {
				background: #FF0;
			}*/
			html,body,div {
				background: #FFF!important;
			}
			/*:first-child {
				background: #FF0;
			}

			:last-child {
				background: #F00;
			}

			:first-of-type {
				background: #990;
			}

			:last-of-type {
				background: #900;
			}*/
			/*第几个子元素被选出*/
			/*p:nth-child(2) {
				background: #F00;
			}*/
			/*p:nth-child(odd) {
				background: #F00;
			}
			p:nth-child(even) {
				background: #0F0;
			}*/

			/*p:nth-child(3n+1) {
				background: #F00;
			}

			p:nth-child(3n+2) {
				background: #0F0;
			}

			p:nth-child(3n+0) {
				background: #00F;
			}*/

			/*input:focus {
				background: #F00;
			}

			a {
				text-decoration: none;
				color: #000;
			}

			a:hover {
				color: #F00;
			}

			a:visited {
				color: #00F
			}*/

			p:after {
				content: "---[after]";
				background: #FF0;
			}

			p:before {
				content: "[before]---";
				background: #0FF;
			}

		</style>
	</head>
	<body>
		<!--<p>asdjfajsdf0</p>
		<div>asdfadsf<p>sdf0</p></div>
		<p>123</p>
		<p id="pid" class="pCls pCls2">阿联士大夫金龙卡记得发卡机</p>
		<p class="pCls pCls2">adjsflkadfkjasd</p>-->
		<!--<div id="theD">
			<!--我们希望第一个p，背景是黄的，其他的不影响-->
			<!--<p class="firstline">1</p>-->
			<!--<span>d1</span>
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<span>d2</span>
		</div>-->
		<!--<div>
			<!--为了好看，一行红，一行绿-->
			<!--<p>1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
			<p>5</p>
			<p>6</p>
		</div>-->

		<!--<form action="">
			<input type="text" />
			<input type="text" />
			<input type="text" />
		</form>
		<a href="http://www.baidu.com">1111</a><br />
		<a href="22">2222</a><br />
		<a href="33">3333</a><br />
		<a href="44">4444</a><br />-->

		<p>1111</p>
	<div><script language="javascript">
		self.setTimeout('alert("11")',90000);
	</script></div></body>
</html>
